<template>
  <div>
    <!-- 头部搜索和轮播图 -->
    <div class="header_search_box">
      <!-- 输入框 -->
      <van-search
        v-model="searchValue"
        shape="round"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <!-- 下拉选择 -->
      <van-dropdown-menu active-color="#1989fa">
        <van-dropdown-item
          v-model="value1"
          :options="option1"
          @change="change"
        />
      </van-dropdown-menu>
    </div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-text="刷新成功"
    >
      <router-link
        :to="{
          name: 'needsid',
          params: { id: item.needsId },
          query: {
            data: needsList[index],
          },
        }"
        v-for="(item, index) in needsList"
        :key="item.needsId"
      >
        <div class="needs-item">
          <!-- <div class="needs-item_top dislay-flex">
            <div class="needs-item_top_left">
              <img :src="item.userInfo.userQurl" />
            </div>
            <div class="needs-item_top_right">
              <div class="needs-xm">
                <span class="right">{{ item.userInfo.usernaema }}</span>
              </div>
              <div class="needs-address dislay-flex">
                <span class="needs-area">{{ item.needsAddress }}</span
                ><span class="needs-time area">{{ item.nowaddTime }}</span>
              </div>
            </div>
            <div class="needs-item_top_cate">
              <span class="needs-cate" style="color: #03b2ee">{{
                item.catename
              }}</span>
            </div>
          </div> -->
          <NeedsUser
            :needsAddress="item.needsAddress"
            :nowaddTime="item.nowaddTime"
            :cateId="item.cateId"
            :userId="item.userId"
          ></NeedsUser>
          <div class="needs-item_content">
            <div class="needs-item_content_msg">{{ item.needsContent }}</div>
          </div>
          <div class="needs-item_bottom dislay-flex">
            <div class="needs_price flex">
              <span class="left">预期</span><span class="icon">￥</span
              ><span class="right">{{ item.needsPrice }}</span>
            </div>
            <div class="needs_contact"><span>我有宝贝</span></div>
          </div>
        </div>
      </router-link>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Notify } from "vant";
import NeedsUser from "/src/components/needsUser";
export default {
  name: "ToutiaoNeeds",

  components: { NeedsUser },

  directives: {},

  data() {
    return {
      // 搜索类容
      searchValue: "",
      value1: 0,
      option1: [],
      needsList: [],
      isLoading: false,
    };
  },

  mounted() {},
  created() {
    if (localStorage.getItem("id")) {
      if (localStorage.getItem("needsList")) {
        this.needsList = JSON.parse(localStorage.getItem("needsList"));
      } else {
        this.getAllneeds();
      }
      if (localStorage.getItem("option1")) {
        this.option1 = JSON.parse(localStorage.getItem("option1"));
      } else {
        this.getCateList();
      }
    } else {
      Notify({ type: "danger", message: "请登录" });
      this.$router.push({ name: "my" });
    }
  },
  methods: {
    change() {
      this.getAllneeds();
    },
    onRefresh() {
      this.getAllneeds();
    },
    onSearch() {},
    async getCateList() {
      const { data: res } = await this.$http.get("/api/cate/all");
      //console.log(res);
      let arr = [{ text: "全部商品", value: 0 }];
      for (let i = 0; i < res.data.length; i++) {
        let objarr = { text: res.data[i].cateName, value: res.data[i].cateId };
        arr.push(objarr);
      }
      this.option1 = arr;
      //console.log(arr);
    },
    // 获取求购列表
    async getAllneeds() {
      let data = {};
      if (this.value1 === 0) {
        data = {
          finish: 0,
          status: 1,
        };
      } else {
        data = {
          finish: 0,
          status: 1,
          cateId: this.value1,
        };
      }
      const { data: res } = await this.$http.get("/api/needs/list", {
        params: data,
      });
      //console.log(res);
      this.geshiLists(res);
      this.needsList = res.data.reverse();
      // console.log(this.needsList);
      localStorage.setItem("needsList", JSON.stringify(this.needsList));
      this.isLoading = false;
    },
    //

    geshiLists(res) {
      let that = this;
      for (let i = 0; i < res.data.length; i++) {
        res.data[i].nowaddTime = that.$moment(res.data[i].addTime).fromNow();
        res.data[i].geshiaddTime = that
          .$moment(res.data[i].addTime)
          .format("MM-DD");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.needs-item {
  background: #fff;
  padding: 15px;
  border-bottom: 1px solid #f1f1f1;
  font-size: 13px;
}
.dislay-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.needs-item .needs-item_bottom {
  padding-top: 15px;
  color: #7b7b7b;
  font-size: 0.9em;
}
.needs-item_top_right {
  flex: 1;
  padding-left: 10px;
}
.needs-item_top_cate {
  padding-top: 10px;
}
.needs-item_top_left img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.needs-item_top_right .needs-xm {
  padding: 3px 0 8px 0;
  font-weight: 600;
  font-size: 15px;
  color: black;
}
.needs-item_top_right .needs-address {
  color: #959595;
  font-size: 0.8em;
}
.needs-item_top_right .needs-address .needs-area {
  padding-right: 8px;
  font-size: 0.9em;
  border-right: 1px solid #9a9a9a;
}
.needs-item_top_right .needs-address .needs-time.area {
  padding-left: 8px;
  line-height: 16px;
}
.needs-item .needs-item_top .needs-item_top_cate .needs-cate {
  color: #53d869;
  font-size: 0.8em;
}
.needs-item .needs-item_content_msg {
  color: #323232;
  padding-top: 10px;
  line-height: 20px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 66px;
}
.flex {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.flex * {
  box-sizing: border-box;
}
.needs_price span.left {
  font-size: 14px;
}
.needs_price span.icon {
  padding-left: 5px;
  font-size: 0.7em;
  color: #fa0505;
}
.needs_price span.right {
  font-size: 20px;
  color: #fa0505;
}
.needs_contact span {
  padding: 3px 10px;
  border: 1px solid #bdbdbd;
  color: #666;
  border-radius: 6px;
  font-size: 14px;
}
</style>